import { connect } from "react-redux"
import type { Dispatch } from "redux"
import { incAction, decAction, fetchRquestAction } from "../store/reducer"

// 组件3
function Com(props: {
  count: number,
  dispatch?: Dispatch,
  increase: (num: number) => void,
  decrease: (num: number) => void,
  fetchRquest: () => void,
}) {

  useEffect(() => { props.fetchRquest() }, [])

  return (
    <div className="com3">
      <p>{props.count}</p>
      <button onClick={e => props.increase(10)}>+10</button>
      <button onClick={e => props.decrease(10)} > -10</button>
    </div >
  )
}

const mapStateToProps = (state: any) => {
  return {
    count: state.counter.count
  }
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  increase: (num: number) => {
    dispatch(incAction(num))
  },
  decrease: (num: number) => {
    dispatch(decAction(num))
  },
  fetchRquest: () => dispatch(fetchRquestAction())
})

export default connect(mapStateToProps, mapDispatchToProps)(Com)
